<template>
  <div>
    <!--遮罩层-->
    <div class="dialog-mark" v-show="hasLogDialog"></div>
    <!--dialog内容层-->
    <transition name="dialog-trans">
      <div class="dialog-content" v-show="hasLogDialog">
        <div class="content-top">
          <span class="title">{{title}}</span>
          <span class="close" @click="emitCloseDialog">X</span>
        </div>
        <!--插销-->
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script lang='ts'>
  import Vue from 'vue'

  import  { Component, Prop, Emit } from 'vue-property-decorator'

  @Component
  export default class Dialog extends Vue {
    @Prop()
    title : string
    @Prop()
    hasLogDialog : boolean

    @Emit()
    emitCloseDialog(){}
  }
</script>

<style lang="scss" scoped>
  .dialog-mark {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .dialog-content {
    width: 35%;
    font-size: 15px;
    background: #fff;
    position: fixed;
    top: 20%;
    left: 35%;
    z-index: 100;
    border-radius: 5px;

    .content-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 15px 20px;
      border-bottom: 1px dashed #c4c4c4;

      .title {
        font-weight: 600;
        letter-spacing: 1px;
      }

      .close {
        cursor: pointer;
      }
    }
  }

  //dialog动画
  .dialog-trans-enter-active {
    transition: all .5s ease;
  }
  .dialog-trans-enter {
    transform: translateY(-500px);
  }
  .dialog-trans-leave-active {
    transition: all .3s ease;
  }
  .dialog-trans-leave-active {
    transform: translateY(-500px);
  }
</style>
